<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .shipinyanshi .main .current-show .current-video {
            height: 2.64rem;
            background: #000;
        }
        .current-video video{
            width: 3.5rem;
            height: 2.64rem;
        }
        .video-info{
            height: .4rem;
        }
        .video-title {
            margin-top: .16rem;
            margin-bottom: .04rem;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="shipinyanshi" >
            <div class="common-header">
                <div class="iconfont goback tran50" @click="back">&#xe66f;</div>
                <div class="title tran50">视频演示</div>
            </div>
            <div class="main">
                <div class="current-show">
                    <div class="current-video" @click="useBigPicturePreview(currentVideo.playUrl)">
                        <video style="background: #000;"
                            preload="auto" controls
                            x-webkit-airplay = "allow"
                            webkit-playsinline="true"
                            playsinline="true"
                            :poster="currentVideo.imageUrl"
                            x5-playsinline
                            v-if="currentVideo.playUrl"
                            :src="currentVideo.playUrl">
                        </video>
                        <div :class="['collect-btn', {active: currentVideo.isCollect}]" @click="changeCollect"></div>
                    </div>
                    <div class="video-info">
                        <div class="video-title">{{currentVideo.title}}</div>
                        <div class="video-publishdate">{{currentVideo.publishTime | handleTimePlus('//::')}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>

    <script>
        apiready = function () {
            var vm = new Vue({
                el: '.app',
                data: {
                    currentVideo: {
                        id: null,
                        title: null,
                        imageUrl: null,
                        playUrl: null,
                        isCollect: false,
                        createTime: null,
                    },
                    videoIndex: null,
                    viodePreview:null
                },
                filters: {
                    handleTimePlus: handleTimePlus
                },
                mounted() {
                    this.init()
                    this.openFrame()
                },
                methods: {
                    useBigPicturePreview: function(path, index, imgPath) {
                        var a = vm.currentVideo.playUrl
                        vm.currentVideo.playUrl = ''
                        vm.currentVideo.playUrl = a
                    },
                    getVideoShowDetail: function (videoShowId) {
                        let _this = this
                        let url = interfaces.PRODUCT_MODULE.INDEX.VIDEO_SHOWS_DETAIL + videoShowId
                        fnGet(url, {}, false, function(ret){
                            if (ret && ret.code === 20000) {
                                vm.currentVideo.title = ret.data.title
                            }
                        })
                    },
                    init() {
                        console.log('参数：', JSON.stringify(api.pageParam));
                        if (api.pageParam.videoId) {
                            this.getVideoShowDetail(api.pageParam.id)
                            var vm = this
                            var param = {
                                module: "VIDEO_SHOW",
                                moduleMediaId: [api.pageParam.id]
                            }
                            fnPostLoading(interfaces.PRODUCT_MODULE.COLLECTION.CHECK_HAS_COLLECT, param, false,
                                function (ret, err) {
                                    if (ret && ret.code === RESPONSE_OK) {
                                        vm.currentVideo.isCollect = ret.data.indexOf(api.pageParam.id) >
                                            -1
                                    }
                                    common("getVideoPlay")(api.pageParam.videoId, function (ret) {
                                        console.log(JSON.stringify(ret));
                                        vm.currentVideo.id = api.pageParam.id
                                        // vm.currentVideo.title = ret.data.videoBase.title
                                        vm.currentVideo.imageUrl = ret.data.videoBase.coverURL
                                        vm.currentVideo.playUrl = ret.data.playInfoList[0].playURL
                                        vm.currentVideo.createTime = ret.data.videoBase.creationTime
                                        setTimeout(() => {
                                            // document.querySelector('#player').play()
                                            addBrowse('VIDEO_SHOW', api.pageParam.id)
                                        }, 500)
                                    })
                                });
                            common("checkHasCollect")(param, function (ret) {

                            })
                        }
                    },
                    openFrame() {
                        api.openFrame({
                            name: 'video_demonstrate_frm',
                            url: 'video_demonstrate_frm.html',
                            rect: {
                                marginTop: $api.fixStatusBar($api.dom('.shipinyanshi')) + 4,
                                marginBottom: api.pageParam.footerH,
                                w: 'auto'
                            },
                            pageParam: api.pageParam
                        });
                    },
                    changeCollect: function () {
                        api.sendEvent({
                            name: 'collectCurVideoWin',
                            extra: {
                                currentVideo: this.currentVideo,
                            }
                        });
                    },
                    back() {
                        api.closeWin()
                    }
                },
            })

            api.addEventListener({
                name: 'eventCurVideo'
            }, function (ret, err) {
                console.log('当前视频：', JSON.stringify(ret));
                var video = ret.value.currentVideo
                vm.videoIndex = ret.value.currentVideoIndex
                vm.currentVideo.playUrl = null
                common("getVideoPlay")(video.videoId, function (ret) {
                    vm.currentVideo.id = video.id
                    vm.currentVideo.title = video.title
                    vm.currentVideo.imageUrl = video.imageUrl
                    vm.currentVideo.playUrl = ret.data.playInfoList[0].playURL
                    vm.currentVideo.isCollect = video.isCollect
                    vm.currentVideo.createTime = video.createTime
                    setTimeout(() => {
                        // document.querySelector('#player').play()
                    }, 500)
                })
            });

            api.addEventListener({
                name: 'collectCurVideoFrm'
            }, function (ret, err) {
                vm.currentVideo.isCollect = ret.value.videoCollectStatus
            });

        }
    </script>
</body>

</html>
